<template>
	<div class="video_box">
		<div class="box_title">
			<img src="../../image/icon_video_title.png" alt />
		</div>
		<div class="box_info">
			<div class="info_video">
				<div class="info_video_item">
					<img src="../../image/icon_video_total.png" alt />
					<div class="value">{{ onlineCount + offlineCount }}</div>
					<div class="label1">监控数量</div>
				</div>
				<div class="info_video_item">
					<img src="../../image/icon_video_on.png" alt />
					<div class="value">{{ onlineCount }}</div>
					<div class="label1">在线数</div>
				</div>
				<div class="info_video_item">
					<img src="../../image/icon_video_off.png" alt />
					<div class="value">{{ offlineCount }}</div>
					<div class="label1">离线数</div>
				</div>
			</div>
			<!-- <div class="info_play"></div> -->
		</div>
	</div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';
import { getDeviceStat } from '/@/api/largeScreen/baseView';


const onlineCount = ref(0)
const offlineCount = ref(0)

const getDeviceInfo = async () =>{
	const data = await getDeviceStat()
	if(data && data.code == 0){
		onlineCount.value = data.data.online || 0
		offlineCount.value = data.data.offline || 0
	}
}

onMounted(() => {
	getDeviceInfo()
});
</script>
<style lang='less' scoped>
.video_box {
	width: 388px;
	height: 210px;
	box-sizing: border-box;
	padding: 8px;
	background: url('../../image/icon_box_bg_2.png') no-repeat;
	background-size: 100% 100%;
	.box_title {
		height: 50px;
		width: 100%;
		background: url('../../image/icon_title_bg.png') no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding-left: 46px;
		display: flex;
		align-items: center;
		img {
			width: 72px;
			height: 16px;
		}
	}
	.box_info {
		width: 100%;
		padding: 16px;
		margin-top: 4px;
		// .info_play {
		// 	margin-top: 20px;
		// 	width: 100%;
		// 	height: 194px;
		// 	background-color: #132741;
		// 	border-radius: 2px;
		// }
	}
}
.info_video {
	display: flex;
	align-items: center;
	justify-content: center;
	&_item {
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-right: 56px;
		&:last-child {
			margin-right: 0;
		}
		img {
			width: 48px;
			height: 48px;
			margin-bottom: 10px;
		}
		.value {
			font-size: 20px;
			color: #fff;
			font-weight: bold;
			line-height: 1;
			margin-bottom: 6px;
		}
		.label1 {
			color: #c9ffff;
			font-size: 12px;
		}
	}
}
</style>